<template>
	<div id="myd">
		<div class="main">
		    <img src="../assets/img/geren.jpg" alt="">
		    <div class="ge">
		        <div class="tou">
		            <img src="/images/moren.jpg" alt="">
		            <span>修改</span>
		        </div>
		        <p class="username">
		            <i>
		                <em></em>
		                <b>修改</b>
		            </i>
		            <input type="text"><br>
		            <a href="javascript:;" class="bao">保存</a>
		            <a href="javascript:;" class="qu">取消</a>
		        </p>
		        <p class="sex">
		            <i>性别<b>修改</b></i><span>未知</span>
		            <input type="text"><br>
		            <a href="javascript:;" class="bao">保存</a>
		            <a href="javascript:;" class="qu">取消</a>
		        </p>
		        <p class="qian">
		            <i>个性签名<b>修改</b></i><span>未知</span>
		            <input type="text"><br>
		            <a href="javascript:;" class="bao">保存</a>
		            <a href="javascript:;" class="qu">取消</a>
		        </p>
		        <p class="map">
		            <i>居住地<b>修改</b></i><span>未知</span>
		            <input type="text"><br>
		            <a href="javascript:;" class="bao">保存</a>
		            <a href="javascript:;" class="qu">取消</a>
		        </p>
		        <p class="work">
		            <i>所在行业<b>修改</b></i><span>未知</span>
		            <input type="text"><br>
		            <a href="javascript:;" class="bao">保存</a>
		            <a href="javascript:;" class="qu">取消</a>
		        </p>
		    </div>
		</div>
	</div>
</template>

<script>
	export default {
		name:'Myd',
		props:{},
		data(){
		  return {
			
		  }
		},
		components:{},
		mounted(){},
		updated(){},
		methods:{}
	}
</script>

<style scoped>
	.main{
	    position:relative;
	    height: 1500px;
		background-color: #000000;
	}
	.main>img{
	    width:100%;
	    height:500px;
	    margin-top: -4px;
	}
	.ge{
	    background:#f2f2f2;
	    width: 1200px;
	    position: absolute;
	    top:400px;
	    left:50%;
	    transform: translateX(-50%);
	    padding-left: 250px;
	    box-shadow: 0 1px 3px rgba(255, 255, 255, 1);
	    padding-bottom: 100px;
	}
	.ge>p{
	    border-bottom:1px solid green;
	    padding:30px 0px;
	    width: 750px;
	    margin-top:20px;
	    font-weight: 600;
	}
	.ge>p span{
	    float:right;
	    display: block;
	    width: 500px;
	    font-weight: 100;
	}
	.ge i{
	    display: inline-block;
	    width: 200px;
	    height:25px;
	    line-height:25px;
	}
	.ge i b{
	    content: "修改";
	    color: red;
	    font-size: 12px;
	    padding-left: 10px;
	    opacity: 0;
	    cursor: pointer;
	}
	.ge i:hover b{
	    opacity: 1;
	}
	.tou{
	    width: 168px;
	    height:168px;
	    position: absolute;
	    left:20px;
	    top:-20px;
	    border-radius: 50%;
	    overflow: hidden;
	}
	.tou img{
	    height: 100%;
	    width: 100%;
	}
	.tou:hover span{
	    opacity: 1;
	}
	.tou span{
	    color:#fff;
	    line-height: 168px;
	    text-align: center;
	    position: absolute;
	    top: 0px;
	    left:0px;
	    width: 100%;
	    height:100%;
	    cursor: pointer;
	    opacity: 0;
	    background-color: rgb(13, 13, 13,.5);
	}
	.ge .username{
	    border:0px;
	}
	.username>i{
	    font-size: 26px;
	}
	.username em{
	    display: inline-block;
	    max-width: 110px;
	    vertical-align: top;
	    overflow: hidden;
	    text-overflow:ellipsis;
	    white-space: nowrap
	}
	.ge .username b{
	    padding-left: 0px;
	}
	.fooder{
	    color:#fff;
	    position: absolute;
	    bottom:50px;
	    left:50%;
	    transform: translateX(-50%);
	}
	.ge input{
	    width: 180px;
	    height: 34px;
	    padding: 4px 10px;
	    font-size: 14px;
	    background: #fff;
	    border: 1px solid #ebebeb;
	    border-radius: 3px;
	    width: 400px;
	    line-height:34px;
	    box-sizing: border-box;
	    transition: background .2s,border .2s;
	    display: none;
	}
	.ge a{
	    width: 62px;
	    height:34px;
	    border:1px solid #000;
	    border-radius: 5px;
	    line-height:34px;
	    text-align: center;
	    color:#fff;
	    background:green;
	    margin-top:20px;
	    display: none;
	}
	.bao{
	    margin-left:215px;
	}
</style>
